import React, {
    Fragment,
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

import {
    Tip,
    Input,
    Loading
} from './../../../components';

import Footer from './components/footer';
import Container from './components/container';

import Connect from '../../../utils/connect';
import * as saveLog from '../../../utils/saveLog';

import userAction from '../../../state/actions/user';
import * as userTypes from '../../../state/types/user';

interface Props {
    page:number,
    userActions:any,
    onPageChange:Function
}

interface State {
    email: string,
    userName: string,
    password: string
}

@Connect({
    userActions:userAction
})
class Account extends PureComponent<Props,State> {
    state = {
        email:``,
        userName:``,
        password:``
    }

    static defaultProps = {
        page:0,
        userActions:{},
        onPageChange:() => null
    }

    get disabled() {
        const {
            email,
            userName,
            password
        } = this.state;
        return !email || !userName || !password;
    }

    get userActions() {
        const {
            userActions
        } = this.props;
        return userActions;
    }

    private onItemChange = (filed:string) => (
        (value:string) => {
            const _state:any = {
                [filed]:value
            }
            this.setState(_state)
        }
    )

    private toPrePage = () => {
        const {
            page,
            onPageChange
        } = this.props;
        onPageChange(page - 1);
    }

    private toNextPage = () => {
        const {
            page,
            onPageChange
        } = this.props;
        onPageChange(page + 1);
    }

    private onSubmit = async () => {
        const {
            email,
            userName,
            password
        } = this.state;

        const _para = {
            email:email,
            passwd:password,
            username:userName
        }

        Loading.show();
        try {
            await this.userActions[
                userTypes.register
            ](_para);
            saveLog.set({
                username:userName,
                password:password
            })
            this.toNextPage();
        }
        catch (e) {
            Tip.warm({
                message:e.message
            })
        }
        Loading.close();
    }

    render() {
        const {
            email,
            userName,
            password
        } = this.state;
        return (
            <Fragment>
                <Container>
                    <View style={styles.itemRow}>
                        <Text style={styles.title}>
                            What is your email?
                        </Text>
                        <Input
                            type="email"
                            value={email}
                            placeholder="Email address"
                            onChange={
                                this.onItemChange(`email`)
                            }
                        />
                    </View>
                    <View style={styles.itemRow}>
                        <Text style={styles.title}>
                            What is your name?
                        </Text>
                        <Input
                            type="text"
                            value={userName}
                            placeholder="Your name"
                            onChange={
                                this.onItemChange(`userName`)
                            }
                        />
                    </View>
                    <View style={styles.itemRow}>
                        <Text style={styles.title}>
                            Set your password?
                        </Text>
                        <Input
                            type="password"
                            value={password}
                            placeholder="Password"
                            onChange={
                                this.onItemChange(`password`)
                            }
                        />
                    </View>
                </Container>
                <Footer
                    disabled={this.disabled}
                    nextPress={this.onSubmit}
                    prePress={this.toPrePage}
                />
            </Fragment>
        )
    }
}

export default Account;

const styles = StyleSheet.create({
    itemRow:{
        marginBottom:40
    },
    title:{
        fontSize:20,
        color:`#000`,
        fontWeight:`bold`
    }
}) as any;